<template>
	<view>
		<view>
			<head-title :titleHead="titleHead" @maintenanceFun="maintenanceFun()"></head-title>
			<view class="repDevice">报修说明</view>
			<view class="repCheckout">

				<checkbox-group v-for="(item,index) in repArr" :key="index">
					<label @click="checkFun(item)">
						<checkbox :checked="item.state" class="leaveCheck" value="yes">{{item.deviceName}}</checkbox>
					</label>
				</checkbox-group>
			</view>
			<textarea class="repText" v-model="repairDesc" placeholder="备注信息"></textarea>
			<view class="repCheckout" style="padding-left: 50rpx;">
				<switch v-model="isPay" @change="changeSwitch" />收费
			</view>
			<view v-if="isPay==1">
				<view class="repDevice" style="margin-top:50upx;">上传收费凭证</view>
				<view>
					<view class="repDevice" style="position: relative;top:180rpx;left:170rpx">上传收费凭证</view>
					<image @click="chooseImage" :src="imgShow" class="imgSty" mode=""></image>
				</view>
			</view>
			
			<view>
				<!-- <input type="file" /> -->
				<!-- <view class="repDevice"style="position: relative;top:180rpx;left:230rpx">上传照片</view>
				<image  @click="chooseImage" :src="imgShow" class="imgSty"  mode=""></image> -->
			</view>

			<view class="logoSty"></view>
		</view>
		<!-- <my-bottom :bottomArr="roleName=='宿管老师'||roleName=='部门经理'?attBottoms:MagBottoms"></my-bottom> -->
	</view>
</template>

<script>
	import topCom from '../component/topCom.vue'
	import bottomCom from '../component/bottom.vue'
	import headTitle from '../component/btnHeadeCom.vue'
	import {
		pathToBase64,
		base64ToPath
	} from '../../utils/index.js'
	import * as imageConversion from 'image-conversion'
	export default {
		name: 'repStatus',
		data() {
			return {
				range:[{"value": 1,"text": "收费"}],
				isPay:0,
				repairUserId: '',
				roleName: '',
				topName: '',
				userName: '',
				titleHead: '报修信息',
				imgShow: '',
				repArr: uni.getStorageSync("repArr") || ["门窗", "空调", "桌椅", "插座", "灯管", "投影仪","公共区域"],
				deviceIds: [],
				photo: '',
				file: {},
				repairBy: '',
				repairDesc: '',
				MagBottoms: [{
						name: 'home',
						icon: 'iconfont icon-yonghutongji',
						text: "考勤",
						path: '/pages/index/index'
					},
					{
						name: 'atttendance',
						icon: 'iconfont icon-bi',
						text: "统计",
						path: '/pages/index/index'
					},
					{
						name: 'maintenance',
						icon: 'iconfont icon-shezhi',
						text: "设置",
						path: '/pages/index/index'
					},
				],
				Repbottoms: [{
						name: 'home',
						icon: 'iconfont icon-baoxiu',
						text: "报修",
						path: '/pages/maintenance/maintenanceIndex'
					},
					{
						name: 'atttendance',
						icon: 'iconfont icon-bi',
						text: "统计",
						path: '/pages/maintenance/maintenanceIndex'
					},
					{
						name: 'maintenance',
						icon: 'iconfont icon-shezhi',
						text: "设置",
						path: '/pages/maintenance/maintenanceIndex'
					}
				],
				attBottoms: [{
						name: 'main',
						icon: 'iconfont icon-yonghutongji',
						text: "考勤",
						path: '/pages/classManagement/classManagementDormitoryAttendance'
					},
					{
						name: 'clear',
						icon: 'iconfont icon-saoba',
						text: "卫生",
						path: '/pages/classManagement/classManageDormitoryHealth'
					},
					{
						name: 'home',
						icon: 'iconfont icon-baoxiu',
						text: "报修",
						path: '/pages/maintenance/dormitoryMaintenanceList'
					}
				],
				buildingNo: null,
				topType: '',
				classId: 1,
				classDeptId: '',
				dormitoryId: 0.,
				dormitoryNo: 1,
				isDuty: 0,
			}
		},
		onShow() {

			// repairUserId
			this.repairUserId = uni.getStorageSync("loginId");
			// alert(this.repairUserId)
			console.log('onShow')
			if (this.classId) {
				this.getAppClassDevice()
			} else {
				this.getAppDevice()
			}
			this.bottomFun()

			let pagearr = getCurrentPages(); //获取应用页面栈
			let currentPage = pagearr[pagearr.length - 1]; //获取当前页面信息
			// console.log('option:', currentPage.options) //获取页面传递的信息


			this.buildingNo = currentPage.options.buildingNo ? currentPage.options.buildingNo : null
			this.classId = currentPage.options.classId
			this.topType = currentPage.options.type
			this.topName = currentPage.options.className || currentPage.options.dormitoryNo
			this.classDeptId - currentPage.options.classDeptId
			this.dormitoryId = currentPage.options.dormitoryId
			this.dormitoryNo = currentPage.options.dormitoryNo

			var that = this
			// uni.getStorage({
			// 	key: 'userInfo',
			// 	success: (res) => {
			// 		that.roleName = res.data
			// 	}
			// })
			this.roleName = uni.getStorageSync("userInfo");

			this.userName = uni.getStorageSync("loginName");
			// uni.getStorage({
			// 	key: 'loginName',
			// 	success: (res) => {
			// 		that.userName = res.data
			// 	}
			// })
			// repairBy
			// uni.getStorage({
			// 	key: 'loginName',
			// 	success: (res) => {
			// 		that.repairBy = res.data
			// 	}
			// })
			this.repairBy = uni.getStorageSync("loginName");

			this.isDuty = uni.getStorageSync("isDuty")
		},
		onLoad(options) {
			console.log('onLoad')
			// console.log(new FormData())
			this.buildingNo = options.buildingNo ? options.buildingNo : null
			this.classId = options.classId
			this.topType = options.type
			this.topName = options.className || options.dormitoryNo
			this.classDeptId - options.classDeptId
			this.dormitoryId = options.dormitoryId
			this.dormitoryNo = options.dormitoryNo



			if (this.classId) {
				this.getAppClassDevice()
			} else {
				this.getAppDevice()
			}
			this.bottomFun()
		},

		mounted() {
			console.log('mounted')
			// if (this.classId) {
			// 	this.getAppClassDevice()
			// } else {
			// 	this.getAppDevice()
			// }
			// this.bottomFun()

		},

		methods: {
			changeSwitch(event){
				debugger
				if(event.detail.value==true){
					this.isPay = 1
				}else{
					this.isPay= 0;
					this.imgShow=null;
				}
			},
			bottomFun() {
				if (this.roleName == '宿管老师') {
					this.userName = this.buildingNo
				}
				if (this.classDeptId) {
					this.attBottoms[0].path =
						`/pages/classManagement/classManagementAttendance?classDeptId=${this.classDeptId}`
					this.attBottoms[1].path = `/pages/classManagement/classManageHealth?classDeptId=${this.classDeptId}`
					this.attBottoms[2].path = `/pages/classManagement/classManageMaintence?classDeptId=${this.classDeptId}`

				} else {
					this.attBottoms[0].path =
						`/pages/classManagement/classManagementDormitoryAttendance?buildingNo=${this.buildingNo}&type=${this.topType}`
					this.attBottoms[1].path =
						`/pages/classManagement/classManageDormitoryHealth?buildingNo=${this.buildingNo}&type=${this.topType}`
					this.attBottoms[2].path =
						`/pages/maintenance/dormitoryMaintenanceList?buildingNo=${this.buildingNo}&type=${this.topType}`
				}
			},

			checkFun(item) {
				item.state = !item.state
				console.log(this.repArr)

				uni.setStorageSync("repArr", this.repArr)
			},


			// 维修提交
			maintenanceFun() {

				uni.removeStorageSync("repArr")

				this.deviceIds = new Array();
				this.repArr.forEach((item, index) => {
					if (item.state) {
						this.deviceIds.push(item.deviceId)
					}
				})
				const dt = new Date()
				const hh = (dt.getHours() + '').padStart(2, '0')
				const mm = (dt.getMinutes() + '').padStart(2, '0')
				const ss = (dt.getSeconds() + '').padStart(2, '0')
				var time = ` ${hh}:${mm}:${ss}`
				var testTime = this.$date.concat(time)



				if (this.deviceIds.length < 0 || this.repairDesc == '') {
					uni.showToast({
						title: "请选择报修说明/描述",
						icon: "none"
					})
					return;
				}
				if(this.isPay==1&&!this.imgShow){
					uni.showToast({
						title: "请上传收费凭证",
						icon: "none"
					})
					return;
				}
				if (this.classId) {

					if (!this.imgShow) {
						this.$api.maintenance.createClassRepair(this.classId, this.repairBy, this.deviceIds,
							this.repairDesc, 0, this.isDuty, this.repairUserId).then(res => {
							setTimeout(function() {
								uni.hideLoading();
							}, 2000);
							if (res.data.code == 200) {
								uni.showToast({
									title: "操作成功"
								})
							}
							var _this = this
							var classId = _this.classId
							var className = _this.topName
							
							uni.reLaunch({
								url: `/pages/maintenance/maintenanceStatus?classId=${classId}&className=${className}&classDeptId=${this.classDeptId}&type=${this.topType}`,
								success: res => {},
								fail: () => {},
								complete: () => {}
							});
						})

					} else {

						// uni.showLoading({
						// 	title: '图片上传中',
						// 	mask: true
						// });
						console.log(this.deviceIds)
						var deviceList = this.deviceIds.join(",");
						// for (var i = 0; i < this.deviceIds.length; i++) {
						// 	deviceList.push(this.deviceIds[i])
						// }
						console.log(deviceList)
						uni.uploadFile({
							// http://192.168.200.143:9004/app/ClassRepair/createClassRepairUpload
							// url: 'http://192.168.200.143:9004/app/ClassRepair/createClassRepairUpload',
							url: uni.url + 'ClassRepair/createClassRepairUpload',
							filePath: this.imgShow,
							name: "file",
							file: this.file,
							formData: {
								// file:this.file,
								classId: this.classId,
								deviceStr: deviceList,
								repairDesc: this.repairDesc,
								status: 0,
								createBy: this.repairBy,
								isDuty: this.isDuty,
								repairUserId: this.repairUserId
							},
							header: {
								Authorization: "Bearer " + uni.getStorageSync("token"),
							},
							success: res => {
								console.log(res, 'success');
								uni.showToast({
									title: "操作成功"
								})
								var _this = this
								var classId = _this.classId
								var className = _this.topName
								
								uni.reLaunch({
									url: `/pages/maintenance/maintenanceStatus?classId=${classId}&className=${className}&classDeptId=${this.classDeptId}&type=${this.topType}`,
									success: res => {},
									fail: () => {},
									complete: () => {}
								});
							},
							fail: res => {
								console.log(res, 'fail')
							}
						})



						// var form = new FormData();
						// form.append("upload", this.file);
						// form.append("classId", this.classId);
						// form.append("deviceIds", this.deviceIds);
						// form.append("repairDesc", this.repairDesc);
						// form.append("status", 0);
						// form.append("createBy", this.repairBy)
						// form.append("isDuty", this.isDuty);

						// // console.log(this.file,'file');
						// // console.log(this.classId,'classId')
						// // console.log(this.deviceIds,'deviceIds')
						// // console.log(this.repairDesc,'repairDesc')
						// // console.log(this.repairBy,'repairBy')
						// // console.log(this.isDuty,'isDuty')
						// this.$http.post('ClassRepair/createClassRepairUpload', form).then(res => {
						// 	setTimeout(function() {
						// 		uni.hideLoading();
						// 	}, 2000);
						// 	if (res.data.code == 200) {
						// 		uni.showToast({
						// 			title: "操作成功"
						// 		})
						// 		var _this = this
						// 		var classId = _this.classId
						// 		var className = _this.topName
						// 		uni.navigateTo({
						// 			url: `/pages/maintenance/maintenanceStatus?classId=${classId}&className=${className}&classDeptId=${this.classDeptId}&type=${this.topType}`,
						// 			success: res => {},
						// 			fail: () => {},
						// 			complete: () => {}
						// 		});

						// 	} else {
						// 		uni.showToast({
						// 			title: "操作失败",
						// 			icon: "none"
						// 		})
						// 	}




						// })
					}

					//   resolve(res)
					// }) app/Repair/createRepair



				} else {

					var userId = uni.getStorageSync("loginId");

					if (!this.imgShow) {
						this.$api.maintenance.createRepair(userId, this.dormitoryId, this.deviceIds, this.repairDesc,
							0, this.repairBy, this.isDuty).then(res => {
							setTimeout(function() {
								uni.hideLoading();
							}, 2000);
							if (res.data.code == 200) {
								uni.showToast({
									title: "操作成功"
								})
							}
							uni.redirectTo({
								url: `/pages/maintenance/maintenanceStatus?dormitoryId=${this.dormitoryId}&dormitoryNo=${this.dormitoryNo}&buildingNo=${this.buildingNo}&type=${this.topType}`,
								success: res => {},
								fail: () => {},
								complete: () => {}
							});
						})

					} else {

						uni.showLoading({
							title: '图片上传中',
							mask: true
						});
						// console.log(this.dormitoryId)
						uni.uploadFile({
							url: uni.url + "Repair/createRepairUpload",
							name: 'upload',
							file: this.file,
							filePath: this.imgShow,
							formData: {
								repairUserId: userId,
								bdormitoryId: this.dormitoryId,
								deviceStr: this.deviceIds.join(","),
								repairDesc: this.repairDesc,
								repairBy: this.repairBy,
								status: 0,
								isDuty: this.isDuty
							},
							header: {
								Authorization: "Bearer " + uni.getStorageSync("token")
							},
							success: res => {
								console.log(res);
								setTimeout(function() {
									uni.hideLoading();
								}, 2000);
								if (res.data.code == 200) {
									uni.showToast({
										title: "操作成功"
									})
								}
								uni.redirectTo({
									url: `/pages/maintenance/maintenanceStatus?dormitoryId=${this.dormitoryId}&dormitoryNo=${this.dormitoryNo}&buildingNo=${this.buildingNo}&type=${this.topType}`,
									success: res => {},
									fail: () => {},
									complete: () => {}
								});
							},
							fail: res => {
								console.log(res);
								uni.hideLoading();
							}
						})
						// var form = new FormData();
						// alert(2)
						// var form = new FormData();
						// form.append("upload", this.file);
						// form.append("bdormitoryId", this.dormitoryId);
						// form.append("deviceIds", this.deviceIds);
						// form.append("repairDesc", this.repairDesc);
						// // repairBy
						// form.append("repairBy", this.repairBy);
						// form.append("status", 0);
						// form.append("isDuty", this.isDuty)
						// this.$http.post("Repair/createRepairUpload", form).then(res => {
						// 	setTimeout(function() {
						// 		uni.hideLoading();
						// 	}, 2000);
						// 	if (res.data.code == 200) {
						// 		uni.showToast({
						// 			title: "操作成功"
						// 		})
						// 	}
						// 	uni.navigateTo({
						// 		url: `/pages/maintenance/maintenanceStatus?dormitoryId=${this.dormitoryId}&dormitoryNo=${this.dormitoryNo}&buildingNo=${this.buildingNo}&type=${this.topType}`,
						// 		success: res => {},
						// 		fail: () => {},
						// 		complete: () => {}
						// 	});
						// })
					}







					// Repair/createRepairUpload
					// const data = this.$qs.stringify({
					// 	upload: this.file,
					// 	bdormitoryId: this.dormitoryId,
					// 	deviceIds: this.deviceIds,
					// 	repairDesc: this.repairDesc,
					// 	status: 0
					// });
				}


			},
			// 维修设备
			getAppDevice() {
				this.$api.teacher.getAppDevice().then(res => {
					var repArr = uni.getStorageSync("repArr");
					if (repArr) {
						this.repArr = repArr
					} else {
						this.repArr = res.data
						this.repArr.forEach((item, index) => {
							item.state = false
						})
					}



				})
			},
			getAppClassDevice() {

				this.$api.teacher.getAppClassDevice().then(res => {
					var repArr = uni.getStorageSync("repArr");
					if (repArr) {
						this.repArr = repArr
					} else {
						this.repArr = res.data
						this.repArr.forEach((item, index) => {
							item.state = false
						})
					}

				})
			},
			chooseImage() {

				uni.chooseImage({
					count: 1,
					sizeType: ['compressed'],
					sourceType: ['album', 'camera'],
					success: async res => {
						console.log(res)
						this.imgShow = res.tempFilePaths[0]; //500kb
						this.file = await imageConversion.compressAccurately(res.tempFiles[0], 500)

					}

				})
			}

		},
		components: {
			topCom,
			bottomCom,
			headTitle
		},
	}
</script>

<style>
	.indexContent {
		font-size: 36rpx;
	}

	.imgSty {
		border: solid 1upx #999999;
		border-radius: 20upx;
		width: 600rpx;
		height: 300upx;
		margin-left: 50rpx;
		margin-top: 30rpx;
		padding: 10upx;
		/* margin-left:90rpx; */
		margin-top: 0rpx
	}

	.repText {
		border: solid 1upx #999999;
		border-radius: 20upx;
		width: 600rpx;
		height: 150upx;
		margin-left: 50rpx;
		margin-top: 30rpx;
		padding: 10upx;
	}

	.repCheckout {
		display: flex;
		/* justify-content: space-between; */
		align-content: center;
		flex-wrap: wrap;
		font-size: 36rpx;
		color: #808080;
		margin-top: 30upx;
		width: 100%;

		/* margin-left:50upx; */
	}

	.repDevice {
		text-align: left;
		font-size: 42rpx;
		color: #808080;
		padding-left: 50upx;
	}

	.leaveNav {
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: row;
		font-size: 38rpx;
		color: blue;
		width: 100%;
		padding: 50upx
	}

	.leaveBtn {
		background-image: url(https://tj-1305380059.cos.ap-nanjing.myqcloud.com/pic/tubiao-01.png);
		width: 190upx;
		height: 60upx;
		color: white;
		font-size: 26upx;
		font-weight: 0;
	}

	.leaveLine {
		width: 200upx;
		height: 8upx;
		background: rgba(239, 220, 11, 1.0);
		opacity: 0.78;
		position: relative;
		bottom: 0upx;
		left: -30upx;
	}

	.leaveMgm {
		color: #808080;
		font-size: 38rpx;
	}

	.leaveCheck {
		margin-left: 60upx;
		margin-bottom: 30upx;
		width: 160rpx;
	}
</style>